<script lang="ts" setup>
  import { useForm } from '@/hooks/arco/useForm';
  import { getTestData } from '@/api/login';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';

  const editForm = useForm({
    state: {
      deptId: '',
      name: '',
      parentId: '',
      members: 0,
      createdAt: '',
    },
    rules: {
      name: {
        required: true,
        message: '请输入部门名称',
      },
      parentId: {
        required: true,
        message: '请选择上级部门',
      },
    },
  });

  const onSubmit = async () => {
    // 校验表单项目
    await editForm.validate();

    // 提交数据
    const data = editForm.state;

    getTestData(data);
  };

  const onReset = () => {
    editForm.resetFields();
  };

  const deptSelect = useSelectOption({
    name: '上级部门',
    apiFun: getTestData,
    fieldNames: {
      value: 'deptId',
      label: 'name',
    },
  });
</script>

<template>
  <div>
    <a-form v-bind="editForm.bindProps" layout="vertical">
      <a-row>
        <a-col :span="24">
          <a-form-item field="parentId" label="上级部门">
            <a-select
              v-model="editForm.state.parentId"
              class="w-full"
              allow-clear
              v-bind="deptSelect.bindProps"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="name" label="部门名称">
            <a-input
              v-model="editForm.state.name"
              placeholder="请输入部门名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="members" label="部门人数">
            <a-input-number v-model="editForm.state.members" readonly />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="createdAt" label="创建时间">
            <a-input v-model="editForm.state.createdAt" readonly />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-space>
            <a-button @click="onReset">重置</a-button>
            <a-button type="primary" @click="onSubmit">提交</a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<style></style>
